<template>
	<div class="archive">
		<div class="count">{{this.$route.params.name || $t('header.archive')}}：{{sum}}{{$t('archive.article')}}</div>
		<el-timeline>
			<el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color" :timestamp="activity.createtime" placement="top" @mouseenter="hoverLine(activity)">
				<div class="line-item">
					<div @click="tiaozhuan(activity.id)" tag="span">{{activity.title}} </div>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
	export default {
		name: 'archive',
		data() {
			return {
				activities: [],
				sum:"100"
			};
		},
		methods: {
			hoverLine(activity) {
				activity.color = "#409eff"
			},
			tiaozhuan(id){
this.$router.push({name:'article',params:{id:id,html:""}})
			}
		},
		created(){
			let c = this;
			 this.$http.get("/api/blog/getsum").then(res => {
	  
	  
	  c.activities = res.data.data.data;
	  
      var data = JSON.stringify(res.data.data.number[0])

		let	total = data.split(':', 2)[1].replace('}', '')		

		  c.sum = parseInt(total);


    });
		}
	}
</script>

<style scoped>
	.line-item {
		display: inline-block;
	}
	
	.line-item:hover {
		cursor: pointer;
		color: #409EFF;
	}
	
	.count {
		margin-bottom: 20px;
		font-size: 20px;
		color: #E6A23C;
	}
</style>